<template>
  <!--外围最大的盒子 -->
  <div class="columnBox">
    <!--左侧列表数据盒子 -->
    <div class="leftList">
      <!-- 列列表标签栏 -->
      <van-list class="two">
        <van-cell
          title="列列表"
          style="background-color: #1a1c25; color: #ffffff"
        />
        <van-cell
          @click="examine(item)"
          v-for="(item, index) in parse"
          :class="[
            'tr-color-1' + (index % 2),
            { active: activeIndex === item },
          ]"
          :title="'列号'  +  item.point_list_id"
          :key="index"
          ><van-icon name="close" size="28" color="#fff" @click="detele(item.point_list_id)"
        /></van-cell>
      </van-list>
      <van-cell
        id="new"
        title="+"
        style="background-color: #1a1c25; color: #26d473"
        @click="add"
      ></van-cell>
    </div>
    <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
    <!--内容区域 -->
    <div class="myconent">
      <conent
      :show='show'
      @chdel='chdel'
      :newList='newList'
      @qingkong='qingkong'
      ref="chiel"
      ></conent>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
//导入子组件
import conent from "./components/conter.vue";
//导入yaml格式进行获取数据转换
import yaml from "js-yaml";
//导入获取列列表数据的接口请求
import { parseApi,deteleparseApi,addparseApi} from "@/api/location";
export default {
  components: {
    conent, //注册组件
  },
  data() {
    return {
      activeIndex: "", //列表选中高亮的变量
      parse: [],  //保存列列表数据的数组
      newList:'',  //用来点击保存数据的变量
      show:false, //控制保存按钮的显示和隐藏
    };
  },

  //注册方法
  methods: {
    qingkong(val){
      this.newList=val
    },
    //自定义事件修改show保存按钮的显示和隐藏
    chdel(val){
      //给show赋值
      this.show=val
      this.activeIndex=''
    },

    //---------------------------------------删除列列表数据事件
    detele(id) {
       // 弹出确认框
      Dialog.confirm({
        title: "删除列列表",
        message: `你确定要删除ID为${id}的列表嘛?`,
      })
        //点击确定执行
        .then(async () => {
          try {
            //发送请求
            let res = await deteleparseApi({
              point_list_id: id, //传入删除的id
            });
            // 提示用户
            this.$toast.success("删除成功");
            //调用获取列列表数据的方法刷新页面
            this.getparse();
            this.newList=''
          } catch {
            //提示用户出错
            this.$toast.fail("删除失败");
          }
        }) // 点击取消
        .catch(() => {
          // 提示用户
          this.$toast.fail("取消成功!");
        });
    },
    //列表点击切换事件
    examine(item) {
      if(this.show == true){
        this.$toast.fail("请先保存或退出新建!");
      }else{
        this.activeIndex=item  //在把点击后的数据保存到变量中
        this.newList=item  //保存点击的那一项
        console.log(this.newList,'点击后的数据');
      }

    },
    //--------------------------------/新建列列表事件
   async add() {
    //提示用户
    this.$toast.fail('请选择库位')
    this.activeIndex=''
    this.newList=''
    this.show=true
    //带用子组件中的数据点击新建时清空数据
    this.$refs.chiel.seveRobot=[]
    },
    // 获取列列表数据的方法
    async getparse() {
      let res = await parseApi();
      //转换yaml格式数据
      let newres = yaml.load(res.data);
      //赋值给列列数组
      this.parse = newres;
    },
  },

  created() {
    // 调用获取列列表数据的方法
    this.getparse();
  },
};
</script>

<style lang="less" scoped>
.columnBox {
    display: flex;
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background-color: #12151a;
  .leftList {
    width: 200px;
    height: 100vh;
    margin-top: 16px;
    .van-cell {
      color: #fff;
      font-size: 16px;
      background-color: #1a1c25;
      margin-left: 10px;
      margin-top: 3px;
      width: 180px !important;
      height: 50px;
      text-align: center;
      &.active {
        color: #00c3c3 !important;
        background-color: #030305 !important;
        position: relative;
        &::before {
          content: "";
          width: 5px;
          height: 60px;
          background-color: skyblue;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .van-cell__title {
        span {
          font-size: 18px !important;
          font-weight: 700 !important;
          line-height: 32px;
        }
      }
    }
    .two {
      margin-top: 20px;
      height: 305px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    /deep/::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background: #33333300;
      /**/
    }
    /deep/::-webkit-scrollbar-track {
      background: rgb(239, 239, 239, 0);
      border-radius: 2px;
    }
    /deep/::-webkit-scrollbar-thumb {
      background: rgba(192, 176, 33);
      border-radius: 10px;
    }
    /deep/::-webkit-scrollbar-thumb:hover {
      background: #33333300;
    }
    /deep/::-webkit-scrollbar-corner {
      background: #33333300;
    }
    /deep/::-webkit-scrollbar-track {
      background: #33333300;
    }
  }
  .myconent{
    flex: 1;
    // height: 500px;
  }
}

#new {
  .van-cell__title {
    // background-color: #1a1c25 !important;
    border-radius: 5px;
    span {
      font-size: 44px !important;
      padding: 5px;
      font-weight: 400 !important;
    }
  }
}

#new:hover {
  background-color: #fac018 !important;
}

</style>
